<template>
	<view class="serMine">
		<view class="img_box">
			<view class="">头像</view>
			<view class="img" @click="upImg">
				<view class="image">
					<image :src="userInfo.avatar"></image>
				</view>
				<image src="../../static/mine-icon/gd.png" class="move"></image>
			</view>
		</view>
		<view class="col">
			<view class="">昵称</view>
			<view class="name" @click="nameShow = true">
				<view class="title">{{userInfo.nickname}}</view>
				<image src="../../static/mine-icon/gd.png" class="move"></image>
			</view>
		</view>
		<view class="col">
			<view class="">手机号码</view>
			<view class="name">
				<view class="title">{{userInfo.mobile}}</view>
			</view>
		</view>
		<view class="save">
			<view class="" @click="setUserData">
				保存
			</view>
		</view>
		<typePopup ref="typePopup" :isShow="nameShow" height="250rpx" type="name" @close="nameShow = false" @sub="nameSub"></typePopup>
	</view>
</template>

<script>
import request from '@/api/request.js';
export default {
	data() {
		return {
			userInfo: {
				avatar: '',
				nickname: '',
				mobile: ''
			},
			nameShow : false,
		};
	},
	onLoad() {
		this.getUserInfo();
	},
	methods: {
		// 获取昵称
		nameSub(data){
			this.nameShow = false;
			this.userInfo.nickname = data;
		},
		// 修改信息
		async setUserData(){
			let par = this.userInfo;
			if(par.avatar === '') {
				uni.showToast({
					title: '请上传头像',
					icon: "none"
				});
				return;
			}
			if(par.nickname === '') {
				uni.showToast({
					title: '请输入昵称',
					icon: "none"
				});
				return;
			}
			let data = await request.post('/api/user/info',this.userInfo);
			if(data.code === 1){
				this.getUserInfo();
				uni.showToast({
					title: data.msg,
					icon: "none"
				});
			}
		},
		// 获取用户信息
		async getUserInfo(){
			let data = await request.get('/api/user/info');
			if(data.code === 1){
				this.userInfo = data.data;
			}
			console.log('用户',data);
		},
		// 图片上传
		upImg() {
			let _self = this;
			let userData = uni.getStorageSync('userData');
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: function (res) {
					uni.showLoading({
						title: '上传中...'
					});
					//获得选择好的文件,就算只有一个文件也是数组
					const tempFilePaths = res.tempFilePaths;
					//第二步:把选择的文件上传到服务器
					const uploadTask = uni.uploadFile({
						url: 'https://api.ztougj.cc/api/common/upload', //后端接口url
						filePath: tempFilePaths[0],
						name: 'file', //和后端接口需要的参数名一致
						header: {
							token: userData.token
						},
						success: (res) => {
							uni.hideLoading();
							let data = JSON.parse(res.data);
							if (data.code === 1) {
								_self.userInfo.avatar = '';
								_self.userInfo.avatar = data.data.fullurl;
							}
						}
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.serMine {
	padding: 20rpx ;
	.img_box {
		background-color: #fff;
		padding: 20rpx;
		box-shadow:  0 0  10rpx 0 #f6f6f6;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		height: 180rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20px;
		.img {
			display: flex;
			align-items: center;
			.image {
				width: 150rpx;
				height: 150rpx;
				margin-right: 20rpx;
				border-radius: 10rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.move {
				width: 1rem;
				height: 1rem;
			}
		}
	}
	.col {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
		box-shadow:  0 0  10rpx 0 #f6f6f6;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		.name {
			display: flex;
			align-items: center;
			.title {
				margin-right: 10rpx;
				color: #bab0b0;
			}
		}
		.move {
			width: 1rem;
			height: 1rem;
		}
	}
	.save {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
		view {
			width: 90%;
			height:80rpx;
			background-color: #d9af75;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			border-radius: 10rpx;
		}
	}
}
</style>
